<template>
  <view>
    <view class="mt-3 mx-3">
      <u-search placeholder="请输入关键字" v-model="keyword" :show-action="false"></u-search>
    </view>
    <u-index-list :index-list="indexLetter">
      <view class="box">
        <view class="title">当前城市</view>
        <view class="city">
          <view class="item add">
            <text class="u-line-1" @click="selectCity('成都')">成都</text>
          </view>
        </view>
      </view>
      <view class="box">
        <view class="title">常用城市</view>
        <view class="city">
          <view class="item u-line-1" v-for="(item, index) in hotCity" @click="selectCity(item)">{{ item }}</view>
        </view>
      </view>
      <template v-for="(item, index) in indexList">
        <u-index-item :index="index" :key="index">
          <u-index-anchor :text="item.letter"></u-index-anchor>
          <view class="list-cell u-border-bottom" v-for="(item2, index2) in item.data" :key="index2" @click="selectCity(item2.name)">
            {{ item2.name }}
          </view>
        </u-index-item>
      </template>
    </u-index-list>
  </view>
</template>

<script>
import {indexList} from '@/plugin/common/index.list'

export default {

  data() {
    return {
      indexLetter: [],
      indexList,
      keyword: '',
      // 常用城市
      hotCity: [
          '北京',
          '深圳',
          '上海',
          '广州',
          '重庆',
          '成都',
          '杭州',
          '郑州',
          '武汉',
          '南京',
          '西安',
      ]
    }
  },
  mounted() {
    this.indexList.forEach(item => {
      this.indexLetter.push(item.letter)
    })
  },
  methods: {
    selectCity(name) {
      uni.setStorage({
        key: 'city',
        data: name,
        success: function () {
          uni.navigateBack()
        }
      });

    }
  },
}
</script>

<style lang="scss">
.box {
  margin: 40rpx 0 30rpx 30rpx;

  .title {
    font-size: 26rpx;
    color: #A6ABB7;
  }

  .city {
    display: flex;
    flex-wrap: wrap;

    .item {
      margin-top: 24rpx;
      margin-right: 18rpx;
      text-align: center;
      width: 25%;
      height: 80rpx;
      line-height: 80rpx;
      background: #FFFFFF;
      border-radius: 8rpx;
      border: 1rpx solid #E5E5E5;
      font-size: 30rpx;
      padding: 0 10rpx;
    }

    .add {
      display: flex;
      align-items: center;
      justify-content: center;

      uni-image {
        margin-right: 8rpx;
        width: 28rpx;
        height: 28rpx;
      }

      uni-text {
        max-width: 145rpx;
      }
    }
  }
}

.list-cell {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  padding: 10px 24rpx;
  overflow: hidden;
  color: #323233;
  font-size: 14px;
  line-height: 24px;
  background-color: #fff;
}
</style>
